<template>
  <div class="home">
    <div ref="file"></div>
  </div>
</template>

<script>
/* eslint-disable */
// import axios from 'axios';
import { mapState } from 'vuex';
import { createWordBuffer } from '../utils/word_template';
const DOCX = require('docx-preview');
export default {
  data () {
    return {}
  },
  watch: {
    word: {
      handler (newVal, oldVal) {
        createWordBuffer(newVal).then(buffer => {
          DOCX.renderAsync(buffer, this.$refs.file);
        });
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    ...mapState(['word'])
  },
  methods: {
    spaceRepeat (n) {
      return '&nbsp;'.repeat(5);
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  min-width: 50%;
  height: 100%;
  & > div {
    height: 100%;
  }
  /deep/ .docx-wrapper {
    width: 100%;
    height: 100%;
    padding: 0;
    box-shadow: none;
    background: #fff;

    section.docx {
      box-shadow: none;
    }
  }
}
</style>
